<template>
  <div class="foots_container up_down_flex bs_bdb" style="height: 60px">
    <div
      class="foot_icnos bs_bdb cur_poi flex"
      v-for="item in footIcons"
      :key="item.id"
    >
      <img
        v-if="item.id !== 5"
        @click="handleSet(item.id)"
        class="cur_poi"
        :src="item.url"
        alt=""
      />
      <div class="chat_icon flex bs_bdb" v-else @click="handleSet(item.id)">
        <img class="cur_poi" :src="item.url" alt="" />
        <span class="fs_14">互动消息</span>
      </div>
    </div>
    <!-- 点击设置ico -->
    <div v-if="store.mapperFoot['foot1']" class="set_box bs_bdb">
      <img
        @click="store.mapperFoot['foot1'] = false"
        class="cur_poi"
        src="../assets/close_head.png"
        alt=""
      />
      <div class="set_title cur_poi fs_18 txt_cent fff">房间管理</div>
      <div
        @click="handleSetType(item)"
        class="set_item cur_poi fff fs_14 bs_bdb"
        v-for="item in mapperLable"
        :key="item.type"
      >
        {{ item.label }}
      </div>
    </div>
    <!-- child List -->
    <div class="set_child bs_bdb" v-show="setCurrVal?.isTrue">
      <img
        @click="setCurrVal.isTrue = false"
        class="cur_poi"
        src="../assets/close_head.png"
        alt=""
      />
      <div class="set_child_title txt_cent fff">
        {{ setCurrVal?.label?.replace("列表", "") }}
      </div>
      <div
        class="set_child_item flex_bt fff bs_bdb"
        v-for="item in store.setList?.[setCurrVal?.type]"
        :key="item.id"
      >
        <div class="img_box up_down_flex">
          <div class="img bd_radio">
            <img
              class="bd_radio"
              :src="item.headimgurl"
              style="width: 40px; height: 40px"
              alt=""
            />
          </div>
          <dir class="fs_12">
            <div class="up">{{ item.nickname }}</div>
            <div class="down">{{ getTime(item?.settime) }}</div>
          </dir>
        </div>
        <div class="btn cur_poi fs_12" @click="handleCancle(item)">撤销</div>
      </div>
    </div>
    <!-- 模拟dialog -->
    <div class="broom padd_range" v-if="store.mapperFoot['foot4']">
      <div class="fff marr_bott10">清空动效</div>
      <div class="fff">清空公屏</div>
    </div>
    <!-- 互动消息dialog -->
    <el-dialog
      class="interact_msg"
      :show-close="false"
      v-model="store.mapperFoot['foot5']"
      :modal="false"
      align-center
      width="326px"
    >
      <div class="interact_msg_main">
        <div class="head flex_bt">
          <img class="cur_poi" src="../assets/filter.png" alt="" />
          <img
            @click="store.mapperFoot['foot5'] = false"
            class="cur_poi"
            src="../assets/close_head.png"
            alt=""
          />
        </div>
        <div class="main flex_bt bs_bdb">
          <div
            @click="handleInteract(1)"
            :class="{ main_item_active: interactType == 1 }"
            class="main_item fs_16 cur_poi"
          >
            互动消息
          </div>
          <div
            @click="handleInteract(2)"
            :class="{ main_item_active: interactType == 2 }"
            class="main_item fs_16 cur_poi"
          >
            潜力用户
          </div>
        </div>
        <div class="out">
          <div class="interact_item bs_bdb" v-for="i in 3" :key="i">
            <div class="up flex_bt">
              <div class="left flex fff">
                <img
                  style="width: 36px; height: 13px"
                  src="../assets/interact_1.png"
                  alt=""
                />
                <img
                  style="width: 37px; height: 17px; margin: 0 8px"
                  src="../assets/interact_2.png"
                  alt=""
                />
                <img
                  style="width: 24px; height: 12px"
                  src="../assets/icon_purple.png"
                  alt=""
                />
                <span style="margin-left: 8px">蜡笔小新</span>
              </div>
              <div class="right fs_14">19:01</div>
            </div>
            <div class="down fff fs_12 bs_bdb">
              打开了 <span style="color: #efe28b">您的资料页</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 麦克风 -->
    <el-dialog
      style="width: 505px; height: 400px; background: #152034"
      class="microPh"
      :show-close="false"
      v-model="store.mapperFoot['foot2']"
      :modal="false"
      align-center
    >
      <div class="microPh_main">
        <img @click="store.mapperFoot['foot2']=false" class="close_img" src="../assets/close_head.png" alt="">
        <div class="title txt_cent fff">声音设置</div>
        <div class="device flex_bt">
          <div class="">
            <div class="lable fff bs_bdb">输入设置</div>
            <el-input v-model="input" style="width: 190px" />
          </div>
          <div class="">
            <div class="lable fff bs_bdb">输出设置</div>
            <el-input v-model="input" style="width: 190px" />
          </div>
        </div>
        <div class="audio flex_bt bs_bdb">
          <div class="">
            <div class="lable">输入音量</div>
            <div class="vol flex">
              <img
                style="width: 14px; height: 14px"
                src="../assets/speaker.png"
                alt=""
              />
              <div
                class="line_bar"
                id="line_bar"
                ref="lineBarRef"
                @mousedown="mousedown"
                @mousemove="mousemove"
                @mouseup="mouseup"
              >
                <div class="progress" ref="progress"></div>
                <div class="inner_point" ref="innerPointRef"></div>
              </div>
            </div>
          </div>
          <div class="">
            <div class="lable bs_bdb">输出音量</div>
            <div class="vol flex">
              <img
                style="width: 14px; height: 14px"
                src="../assets/speaker.png"
                alt=""
              />
              <!-- <div class="line_bar"></div> -->
              <div
                class="line_bar"
                id="line_bar"
                ref="lineBarRef"
                @mousedown="mousedown"
                @mousemove="mousemove"
                @mouseup="mouseup"
              >
                <div class="progress" ref="progress"></div>
                <div class="inner_point" ref="innerPointRef"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="fs_14">鼠标左击开始测试麦克风 以下为麦克风收音状态</div>
        <div class="sound_wave flex_row">
          <div class="sound_wave_btn fff fs_12 bs_bdb cur_poi">测试一下</div>
          <div class="lines_box flex_row">
            <div class="lines" v-for="i in 38" :key="i"></div>
            <div class="lines"></div>
          </div>
        </div>
        <div class="flex_bt">
          <div class="flex" @click="isGrowth = !isGrowth">
            <img
              v-if="!isGrowth"
              class="cur_poi"
              style="width: 12px; height: 12px; margin-right: 3px"
              src="../assets/vol.png"
              alt=""
            />
            <img
              v-else
              class="cur_poi"
              style="width: 12px; height: 12px; margin-right: 3px"
              src="../assets/vol_act.png"
              alt=""
            />
            <span>麦克风增强</span>
          </div>
          <div class="flex" @click="isDenoise = !isDenoise">
            <img
              v-if="!isDenoise"
              class="cur_poi"
              style="width: 12px; height: 12px; margin-right: 3px"
              src="../assets/vol.png"
              alt=""
            />
            <img
              v-else
              class="cur_poi"
              style="width: 12px; height: 12px; margin-right: 3px"
              src="../assets/vol_act.png"
              alt=""
            />
            <span>麦克风降噪</span>
          </div>
        </div>
        <div class="sure_btn fs_18 txt_cent fff">确认</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useCounterStore } from "../store";
import img from "../utils";
// 变量
const isDragging = ref(false);
const lineBarRef = ref(null);
const innerPointRef = ref(null);
const progress = ref(null);
// 是否开启麦克风增强降噪
const isGrowth = ref(false);
const isDenoise = ref(false);

const store = useCounterStore();
const interactType = ref(1);

const isBroomDialog = ref(false);
const isOpenManageList = ref(false);
const isOpenTickList = ref(false);
const isOpenForbiTalkList = ref(false);
const isOpenBlackList = ref(false);
const setCurrVal = ref(null);
// const mapperFoot=reactive({
//   foot1:false,
//   foot2:false,
//   foot3:false,
//   foot4:false,
//   foot5:false,
// })
const footIcons = ref([
  {
    url: new URL("../assets/foot_1.png", import.meta.url).href,
    id: 1,
  },
  {
    url: new URL("../assets/foot_2.png", import.meta.url).href,
    id: 2,
  },
  {
    url: new URL("../assets/foot_3.png", import.meta.url).href,
    id: 3,
  },
  {
    url: new URL("../assets/foot_4.png", import.meta.url).href,
    id: 4,
  },
  {
    url: new URL("../assets/foot_5.png", import.meta.url).href,
    id: 5,
  },
]);
const mapperLable = ref([
  {
    label: "管理员列表",
    type: "adminlist",
    isTrue: false,
  },
  {
    label: "被踢出者列表",
    type: "tickoutlist",
    isTrue: false,
  },
  {
    label: "禁言列表",
    type: "jinyanlist",
    isTrue: false,
  },
  {
    label: "黑名单列表",
    type: "laheilist",
    isTrue: false,
  },
]);
const cancelOb = reactive({
  adminlist: "canceladmin",
  tickoutlist: "canceltickout",
  jinyanlist: "canceljinyan",
  laheilist: "cancellahei",
});
const handleSetType = (v) => {
  v.isTrue = true;
  setCurrVal.value = v;
  if (store.isLine && store.joinRoom) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: v.type,
      data: {},
    });
  }
};
const handleSet = (val) => {
  console.log("val-----------", val);
  Object.keys(store.mapperFoot).filter((v) => {
    if (v.includes(val)) {
      store.mapperFoot[v] = true;
      console.log("  store.mapperFoot[v]======", store.mapperFoot[v]);
    } else {
      store.mapperFoot[v] = false;
      console.log("v2", v);
    }
  });
  console.log(" store.mapperFoot===========>", store.mapperFoot);
  // if (val === 1) {
  //   store.isSetDialog = !store.isSetDialog;
  //   isBroomDialog.value=false;
  // }
  // if (val === 4) {
  //   isBroomDialog.value=true;

  // }
};
const manageList = () => {
  isOpenManageList.value = !isOpenManageList.value;
  //    {"c":"room","m":"adminlist","data":{}}
  if (store.isLine && store.joinRoom) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "adminlist",
      data: {},
    });
  }
};
const getTime = (str = "1730101818") => {
  const dt = new Date(Number(str) * 1000);
  let year = dt.getFullYear();
  let month = String(dt.getMonth() + 1).padStart(2, 0);
  let day = String(dt.getDate()).padStart(2, 0);
  return `${year}年${month}月${day}日`;
};
const handleCancle = (val) => {
  console.log(cancelOb[setCurrVal.value.type], "撤销-------------------", val);
  if (store.isLine) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: cancelOb[setCurrVal.value.type],
      data: {
        uid: val.id,
      },
    });
  }
  // cancelOb
  // {"c":"room","m":"canceljinyan","data":{"uid":79410325}}
  // {"c":"room","m":"cancellahei","data":{"uid":79410325}}
  // {"c":"room","m":"canceltickout","data":{"uid":79410325}}
  // {"c":"room","m":"canceladmin","data":{"uid":37528764}}
};
const handleInteract = (val) => {
  interactType.value = val;
};

// 方法
const mousedown = () => {
  isDragging.value = true;
};
const mousemove = (e) => {
  if (isDragging.value) {
    const boxRect = lineBarRef.value.getBoundingClientRect();
    let left = e.clientX - boxRect.left - innerPointRef.value.offsetWidth / 2;
    if (left < 0) {
      left = 0;
    } else if (left > boxRect.width - innerPointRef.value.offsetWidth) {
      left = boxRect.width - innerPointRef.value.offsetWidth;
    }
    const progressWidth = (left / boxRect.width) * 100;
    innerPointRef.value.style.left = `${left}px`;
    progress.value.style.width = `${progressWidth}%`;
  }
};
const mouseup = () => {
  isDragging.value = false;
};
onMounted(() => {
  console.log("11111111111111111manageList", getTime());
  manageList();
});
// const tickList = () => {
//   isOpenTickList.value = !isOpenTickList.value;
//   //    {"c":"room","m":"tickoutlist","data":{}}
//   if (store.isLine && store.joinRoom) {
//     store.socketOB.socketSendMessage({
//       c: "room",
//       m: "tickoutlist",
//       data: {},
//     });
//   }
// };
// const forbiTalkList = () => {
//   isOpenForbiTalkList.value = !isOpenForbiTalkList.value;
//   //   {"c":"room","m":"jinyanlist","data":{}}
//   if (store.isLine && store.joinRoom) {
//     store.socketOB.socketSendMessage({
//       c: "room",
//       m: "jinyanlist",
//       data: {},
//     });
//   }
// };
// const blackList = () => {
//   isOpenBlackList.value = !isOpenBlackList.value;
//   //    {"c":"room","m":"laheilist","data":{}}
//   if (store.isLine && store.joinRoom) {
//     store.socketOB.socketSendMessage({
//       c: "room",
//       m: "laheilist",
//       data: {},
//     });
//   }
// };
</script>

<style scoped lang="scss">
.foots_container {
  background: #1d1f22;
  padding: 0 14px;
  .foot_icnos {
    padding: 0 10px;
    img {
      width: 25px;
      height: 25px;
    }
    .chat_icon {
      padding: 5px 10px;
      background: #343739;
      border-radius: 50px 50px 50px 50px;
      span {
        margin-left: 3px;
        color: #a7a6ab;
      }
    }
  }
  .set_box > img,
  .set_child > img {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 8px;
    top: 8px;
  }
  .set_box {
    margin-left: 14px;
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 326px;
    height: 532px;
    background: #282c2f;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 8px 8px 8px 8px;
    padding: 20px;
    .set_title {
      margin-top: 15px;
    }
    .set_item {
      padding: 18px 0;
    }
  }
  .set_child {
    position: absolute;
    left: 350px;
    bottom: 60px;
    width: 326px;
    height: 532px;
    background: #282c2f;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 8px 8px 8px 8px;
    padding: 20px;
    .set_child_title {
      margin-top: 15px;
    }
    .set_child_item {
      padding: 18px 0;
      .img {
        margin-right: 10px;
      }
      .btn {
        padding: 7px 22px;
        box-sizing: border-box;
        background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
        border-radius: 50px 50px 50px 50px;
      }
    }
  }
  .broom {
    position: absolute;
    bottom: 60px;
    left: 130px;
    background: #1d1f22;
    box-shadow: 0px 1px 2px 2px rgba(0, 0, 0, 0.4);
  }
  // ???
  :deep(.el-dialog).interact_msg {
    padding: 0 15px !important;
    height: 532px;
    background: #282c2f;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 8px 8px 8px 8px;
  }
  .interact_msg_main {
    // padding: 0 50px;
    .head {
      img {
        width: 24px;
        height: 24px;
      }
    }
    .main {
      padding: 0px 50px;
      margin-top: -8px;
      .main_item_active {
        color: #895cf8;
      }
    }
    .out {
      overflow: auto;
      padding-top: 30px;
    }
    .interact_item {
      margin: 0 15px;
      // border: 1px solid red;
      .down {
        margin-top: 10px;
        padding-left: 5px;
      }
    }

    .interact_item:not(:first-child) {
      padding: 20px 0 10px;
    }
  }
  // 麦克风页面
  :deep(.el-dialog__header){
    position: relative;
  }
  .microPh_main {
    .close_img{
      position: absolute;
      right: 15px;
      top: 15px;
      width: 25px;
      height: 25px;
    }
    .device {
      margin-top: 15px;
      :deep(.el-input__wrapper) {
        background: #353e4f;
        border-radius: 50px 50px 50px 50px;
        box-shadow: none;
      }
      .lable {
        padding: 0 11px;
        margin-bottom: 7px;
      }
    }
    .audio {
      // padding:0 11px;
      margin-bottom: 30px;
      .lable {
        padding: 16px 0 9px;
      }

      .line_bar {
        width: 168px;
        height: 6px;
        background: #b0b1b4;
        border-radius: 0px 0px 0px 0px;
        margin-left: 7px;
        position: relative;
        .inner_point {
          width: 10px;
          height: 10px;
          background: #dcdde0;
          position: absolute;
          border-radius: 50%;
          top: -2px;
          left: 1px;
          z-index: 99999;
          cursor: pointer;
        }
        .progress {
          height: 100%;
          background: #a141e0;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    .sound_wave {
      margin: 30px 0 20px;
      .sound_wave_btn {
        padding: 4px 11px;
        background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
        border-radius: 50px 50px 50px 50px;
        border: none;
      }
      .lines:first-child {
        margin-left: 9px;
      }
      .lines {
        width: 2px;
        height: 20px;
        background: #dcdde0;
        border-radius: 0px 0px 0px 0px;
        // margin-left: 9px;
        margin-right: 8px;
      }
    }
    .sure_btn {
      padding: 6px 0;
      width: 180px;
      background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
      border-radius: 50px 50px 50px 50px;
      margin: 15px auto;
    }
  }
}
</style>
